<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>编辑地图</title>

    <link href="../../../../resources/lib/bui/css/dpl-min.css"
          th:href="@{/resources/lib/bui/css/dpl-min.css}"
          rel="stylesheet" />
    <link href="../../../../resources/lib/bui/css/bui-min.css"
          th:href="@{/resources/lib/bui/css/bui-min.css}"
          rel="stylesheet" />
    <link rel="stylesheet" href="http://g.tbcdn.cn/fi/bui/css/layout-min.css">

    <link href="../../../../resources/css/map.css" rel="stylesheet" type="text/css"
          th:href="@{/resources/css/map.css}"/>
    <link href="../../../../resources/lib/raphael/css/svgCanvas.css" rel="stylesheet"
          th:href="@{/resources/lib/raphael/css/svgCanvas.css}"/>
    <script type="text/javascript" src="../../../../resources/lib/jquery/jquery-1.8.2.min.js"
            th:src="@{/resources/lib/jquery/jquery-1.8.2.min.js}"></script>
    <script type="text/javascript" src="../../../../resources/lib/raphael/undomanager.js"
            th:src="@{/resources/lib/raphael/undomanager.js}"></script>
    <script type="text/javascript" src="../../../../resources/lib/raphael/raphael-min.js"
            th:src="@{/resources/lib/raphael/raphael-min.js}"></script>
    <script type="text/javascript" src="../../../../resources/lib/raphael/raphael.zoom.js"
            th:src="@{/resources/lib/raphael/raphael.zoom.js}"></script>
    <script type="text/javascript" src="../../../../resources/lib/raphael/raphael.json.js"
            th:src="@{/resources/lib/raphael/raphael.json.js}"></script>
    <script type="text/javascript" src="../../../../resources/lib/raphael/raphael.free_transform.js"
            th:src="@{/resources/lib/raphael/raphael.free_transform.js}"></script>
    <script type="text/javascript" src="../../../../resources/lib/raphael/raphael.inline_text_editing.js"
            th:src="@{/resources/lib/raphael/raphael.inline_text_editing.js}"></script>
    <script type="text/javascript" src="../../../../resources/lib/raphael/raphael.draw.js"
            th:src="@{/resources/lib/raphael/raphael.draw.js}"></script>

    <!--<script src="../../../../resources/lib/bui/js/jquery-1.8.1.min.js"-->
    <!--th:src="@{/resources/lib/bui/js/jquery-1.8.1.min.js}"></script>-->
    <script src="../../../../resources/lib/bui/js/bui-min.js"
            th:src="@{/resources/lib/bui/js/bui-min.js}"></script>
    <script src="../../../../resources/lib/jquery/jquery.form.min.js"
            th:src="@{/resources/lib/jquery/jquery.form.min.js}"></script>
    <script src="../../../../resources/lib/jquery/jquery.util.js"
            th:src="@{/resources/lib/jquery/jquery.util.js}"></script>

    <style>
        #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
        body {
            padding: 10px;
            background-color: #E8E9EE;
            -moz-user-select:none;
            -webkit-user-select:none;
        }
        #west {
            border:1px solid #aaaaaa;
            position: absolute;
            top: 10px;
            left: 10px;
            bottom: 10px;
            width: 250px;
        }
        .ext-border-layout .x-border-north, .ext-border-layout .x-border-east, .ext-border-layout .x-border-west, .ext-border-layout .x-border-south, .ext-border-layout .x-border-center {
            /*border: 1px solid #3892d3;*/
            /*border: 1px solid #E8E9EE;*/
        }
        .x-accordion-title{
            /*background: #dfeaf2;*/
            background: #4b9df2;
            /*border-bottom: 5px solid white;*/
            padding: 8px 10px;
        }

        .x-accordion-title:hover{
            background-color: #5ac3f9;
        }
            /*.x-accordion-body{*/
            /*margin-top: -5px;;*/
            /*}*/
        .x-collapsed .x-accordion-body{
            margin-top: 5px;;
            height: 0;
            overflow: hidden;
        }
    </style>
</head>

<body onselect="return false;">
<!--<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>-->
<!--<div style="height: 200px;" id="acTreeContainer" th:class="${acListIsEmpty}?'hide span6':'span6'" >-->
<!--<div class="panel panel-head-borded panel-small span6" style="position: fixed;">-->
<!--<div id="tree">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->



<div id="west">
    <div id="explorer" style="width: 100%; height: 100%">

    </div>
</div>
<div style="position: absolute; top: 10px; left: 270px; bottom: 10px; right: 10px; margin: 0; padding: 0; ">
    <div id="desenho" style="">
        <div id="top_toolbar">
            <div style="float: left;">
                <div class="op icon_zoom_area" onclick="create()" title="清空"></div>
                <div class="op icon_save" onclick="save()" title="保存"></div>
                <div class="op icon_save" onclick="save()" title="刷新"></div>
                <div class="op icon_create" onclick="size()" title="界面尺寸"></div>
                <div class="op icon_bg_image" onclick="importBackgroundImage()" title="导入背景" style="overflow: hidden;">
                    <input id="importImage" type="file" style="filter:alpha(opacity=0);opacity:0;width:24px;height: 24px;" />
                </div>
                <div class="op icon_bg_image1" onclick="importBackgroundImage()" title="导入图片" style="overflow: hidden;">
                    <input id="importImage1" type="file" style="filter:alpha(opacity=0);opacity:0;width:24px;height: 24px;" />
                </div>
                <div class="op icon_undo" onclick="svgCanvas.undo()" title="撤消"></div>
                <div class="op icon_redo" onclick="svgCanvas.redo()" title="重做"></div>
            </div>
            <div id="penToolBar" style="float: left; margin-left: 10px;">
                <!--<div name="select" class="op_sel icon_pointer" onclick="svgCanvas.changeTool('select')" title="选择"></div>-->
                <div name="select" class="op icon_pointer" onclick="svgCanvas.changeTool('select')" title="选择"></div>
                <!--<div name="zoom_area" class="op icon_zoom_area" onclick="svgCanvas.changeTool('zoom_area')" title="区域缩放"></div>-->
                <div name="text_edit" class="op icon_text_edit" onclick="svgCanvas.changeTool('text_edit')" title="修改文本"></div>
                <div name="text" class="op icon_text" onclick="svgCanvas.changeTool('text')" title="文本"></div>
                <div name="rect" class="op icon_rect" onclick="svgCanvas.changeTool('rect')" title="矩形"></div>
                <div name="circle" class="op icon_circle" onclick="svgCanvas.changeTool('circle')" title="圆形"></div>
                <div name="ellipse" class="op icon_ellipse" onclick="svgCanvas.changeTool('ellipse')" title="椭圆形"></div>
                <div name="polygon" class="op icon_polygon" onclick="svgCanvas.changeTool('polygon')" title="多边形"></div>
                <div name="line" class="op icon_line" onclick="svgCanvas.changeTool('line')" title="直线"></div>
            </div>
            <div id="elementToolBar" style="float: left; margin-left: 10px; display: none">
                <div class="op icon_remove" onclick="removeSelected()" title="删除"></div>
                <div class="op icon_bring_backward" onclick="svgCanvas.selectedToBack()" title="移动到底部"></div>
                <div class="op icon_bring_forward" onclick="svgCanvas.selectedToFront()" title="移动到顶部"></div>
            </div>
            <div id="pathToolBar" style="float: left; margin-left: 10px; display: none">
                <div id="closePath" class="op icon_close_path" onclick="closePath(this)" title="闭合路径"></div>
            </div>
            <div id="alignToolBar" style="float: left; display: none">
                <div id="alignLeft" class="op icon_align_left" onclick="alignLeft()" title="左对齐"></div>
                <div id="alignCenter" class="op icon_align_center" onclick="alignCenter()" title="水平居中"></div>
                <div id="alignRight" class="op icon_align_right" onclick="alignRight()" title="右对齐"></div>
                <div id="alignTop" class="op icon_align_top" onclick="alignTop()" title="顶部对齐"></div>
                <div id="alignMiddle" class="op icon_align_middle" onclick="alignMiddle()" title="垂直居中"></div>
                <div id="alignBottom" class="op icon_align_bottom" onclick="alignBottom()" title="底部对齐"></div>
            </div>
            <div style="clear: both;"></div>
        </div>

        <div id="work_area">
            <div id="area_container" onselectstart="return false;">
                <div id="areaCanvas">
                    <div id="canvas_container" ondrop="drop(event)" ondragover="allowDrop(event)">
                        <!--<div id="canvas_container" ondrop="drop(event)" ondragover="allowDrop(event)">-->
                    </div>
                </div>
                <div class="map-zoomin" onclick="svgCanvas.setZoom(svgCanvas.getZoom() * 1.1);">+</div>
                <div class="map-zoomout" onclick="svgCanvas.setZoom(svgCanvas.getZoom() / 1.1)">−</div>
            </div>
        </div>
        <div id="bottom_toolbar">
            <div id="dica_dada"></div>
            <div id="cores_vez">
                <div id="zoom_tool" style="float: left;">
                    <div style="float: left; line-height: 26px;" title="无颜色">
                        缩放
                    </div>
                    <div style="float: left;">
                        <select id="zoom-selector" onchange="svgCanvas.setZoom(this.value)" style="margin-top: 4px">
                            <option value="0.1">10%</option>
                            <option value="0.2">20%</option>
                            <option value="0.5">50%</option>
                            <option value="1" selected>100%</option>
                            <option value="1.5">150%</option>
                            <option value="2">200%</option>
                            <option value="3">300%</option>
                        </select>
                        <!--<input type="number" min="6" max="72" value="22" title="可见度" placeholder=""-->
                        <!--style="width: 40px; margin-left: 2px;" onchange="fontSizeChange(this.value)">-->
                    </div>
                    <div style="clear: both;"></div>
                </div>
                <div id="fill_tool" style="float: left; margin-left: 10px;">
                    <div style="float: left; line-height: 26px;" title="无颜色">
                        填充
                    </div>
                    <div id="fill_none" class="op icon_no_color" onclick="fillChange('none')" style="float: left;"></div>
                    <div class="op_sel" style="float: left;">
                        <input id="fill_picker" class="color_picker" type="color" title="填充" value="#000"
                               onchange="fillChange(this.value)">
                    </div>
                    <div style="float: left;">
                        <div>
                            <div class="cor" style="background-color: #000;" onclick="fillChange('#000000')"></div>
                            <div class="cor" style="background-color: #666;" onclick="fillChange('#666666')"></div>
                            <div class="cor" style="background-color: #8b0000;" onclick="fillChange('#8b0000')"></div>
                            <div class="cor" style="background-color: #008b00;" onclick="fillChange('#008b00')"></div>
                            <div class="cor" style="background-color: #00008b;" onclick="fillChange('#00008b')"></div>
                            <div class="cor" style="background-color: #008b8b;" onclick="fillChange('#008b8b')"></div>
                            <div class="cor" style="background-color: #8b8b00;" onclick="fillChange('#8b8b00')"></div>
                            <div class="cor" style="background-color: #8B4500;" onclick="fillChange('#8B4500')"></div>
                            <div class="cor" style="background-color: #8B0A50;" onclick="fillChange('#8B0A50')"></div>
                            <div class="cor" style="background-color: #551A8B;" onclick="fillChange('#551A8B')"></div>
                            <div class="cor" style="background-color: #548B54;" onclick="fillChange('#548B54')"></div>
                            <div class="cor" style="background-color: #8B6969;" onclick="fillChange('#8B6969')"></div>
                            <div class="cor" style="background-color: #8B7B8B;" onclick="fillChange('#8B7B8B')"></div>
                        </div>
                        <div style="clear: both;">
                            <div class="cor" style="margin-top: 2px; background-color: #ffffff;" onclick="fillChange('#FFFFFF')"></div>
                            <div class="cor" style="margin-top: 2px; background-color: #cccccc;" onclick="fillChange('#CCCCCC')"></div>
                            <div class="cor" style="margin-top: 2px; background-color: #ff0000;" onclick="fillChange('#ff0000')"></div>
                            <div class="cor" style="margin-top: 2px; background-color: #00ff00;" onclick="fillChange('#00ff00')"></div>
                            <div class="cor" style="margin-top: 2px; background-color: #0000ff;" onclick="fillChange('#0000ff')"></div>
                            <div class="cor" style="margin-top: 2px; background-color: #00ffff;" onclick="fillChange('#00ffff')"></div>
                            <div class="cor" style="margin-top: 2px; background-color: #ffff00;" onclick="fillChange('#ffff00')"></div>
                            <div class="cor" style="margin-top: 2px; background-color: #FF7F00;" onclick="fillChange('#FF7F00')"></div>
                            <div class="cor" style="margin-top: 2px; background-color: #FF1493;" onclick="fillChange('#FF1493')"></div>
                            <div class="cor" style="margin-top: 2px; background-color: #9B30FF;" onclick="fillChange('#9B30FF')"></div>
                            <div class="cor" style="margin-top: 2px; background-color: #9AFF9A;" onclick="fillChange('#9AFF9A')"></div>
                            <div class="cor" style="margin-top: 2px; background-color: #FFC1C1;" onclick="fillChange('#FFC1C1')"></div>
                            <div class="cor" style="margin-top: 2px; background-color: #FFE1FF;" onclick="fillChange('#FFE1FF')"></div>
                        </div>
                    </div>
                    <div style="float: left;">
                        <input id="fill-opacity" type="number" min="0" max="1" step="0.1" value="1" title="可见度"
                               style="width: 40px; margin-left: 2px;" onchange="svgCanvas.attrChanged({'fill-opacity': this.value})">
                    </div>
                </div>
                <div id="stroke_tool" style="float: left; margin-left: 10px;">
                    <div style="float: left; line-height: 26px;" title="无颜色">
                        边线
                    </div>
                    <div id="stroke_none" class="op icon_no_color" onclick="strokeChange('none')" style="float: left;"></div>
                    <div class="op_sel" style="float: left;">
                        <input id="stroke_picker" class="color_picker" type="color" title="边线颜色" onchange="strokeChange(this.value)">
                    </div>
                    <div id="stroke-width" style="float: left;">
                        <div id="op_larg10" class="op" onclick="strokeWidthChange(10)" title="Weight 10"></div>
                        <div id="op_larg8" class="op" onclick="strokeWidthChange(8)" title="Weight 8"></div>
                        <div id="op_larg6" class="op_sel" onclick="strokeWidthChange(6)" title="Weight 6"></div>
                        <div id="op_larg4" class="op" onclick="strokeWidthChange(4)" title="Weight 4"></div>
                        <div id="op_larg2" class="op" onclick="strokeWidthChange(2)" title="Weight 2"></div>
                    </div>
                </div>
                <div id="font_tool" style="float: left; margin-left: 10px; display: none">
                    <div style="float: left; line-height: 26px;" title="字体">
                        字体
                    </div>
                    <div style="float: left;">
                        <select id="font-family" onchange="fontFamilyChange(this.value)" style="margin: 0;">
                            <option value="Arial">Arial</option>
                            <option value="Serif">Serif</option>
                            <option value="fantasy">Fantasy</option>
                            <option value="宋体">宋体</option>
                            <option value="楷体">楷体</option>
                            <option value="黑体">黑体</option>
                            <option value="幼圆">幼圆</option>
                            <option value="微软雅黑">微软雅黑</option>
                        </select>
                        <input id="font-size" type="number" min="6" max="100" value="22" title="字号" placeholder=""
                               style="width: 40px; margin-left: 2px;" onchange="fontSizeChange(this.value)">
                    </div>
                    <div id="font-weight" class="op" onclick="textStyleChange(this, 'font-weight')" title="加粗"
                         style="font-weight: bold;line-height: 26px; font-size: 18px; margin-left: 2px;">B</div>
                    <div id="font-style" class="op" onclick="textStyleChange(this, 'font-style')" title="斜体"
                         style="font-weight: bold;font-style: italic;line-height: 26px; font-size: 18px; margin-left: 2px;">I</div>
                </div>
                <div id="rect_tool" style="float: left; margin-left: 10px; display: none">
                    <div style="float: left; line-height: 26px;" title="无颜色">
                        圆角
                    </div>
                    <input id="rect-r" type="number" min="0" max="100" step="1" value="0" title="圆角半径"
                           style="width: 40px; margin-left: 2px;" onchange="svgCanvas.attrChanged({'r': this.value})">
                </div>
                <div id="elementName" style="float: right; line-height: 26px; margin-right: 10px; display: none">
                </div>
            </div>
        </div>
    </div>
</div>
<div id="content" class="hide">
    <form id="map" class="form-horizontal">
        <div class="row">
            <div class="control-group span6">
                <label class="control-label">800*600：</label>
                <div class="controls row">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label class="radio"><input name="enable" type="radio" value="0">800*600</label>
                </div>
                <!--<label class="control-label">1280*800：</label>-->
                <div class="controls">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label class="radio"><input name="enable" type="radio" value="1">1280*800</label>
                </div>
                <!--<label class="control-label">1440*900：</label>-->
                <div class="controls">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label class="radio"><input name="enable" type="radio" value="2">1440*900</label>
                </div>
                <!--<label class="control-label">1680*1050：</label>-->
                <div class="controls">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label class="radio"><input name="enable" type="radio" value="3">1680*1050</label>
                </div>
                <!--<label class="control-label">1920*1080：</label>-->
                <div class="controls">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label class="radio"><input name="enable" type="radio" value="4">1920*1080</label>
                <!--<input type="text" id="height" class="input-normal control-text">-->
                </div>

                <label class="control-label">高度：</label>
                <div class="controls">
                    <input type="text" id="height" class="input-normal control-text">
                </div>
                <label class="control-label">宽度：</label>
                <div class="controls">
                    <input type="text" id="width" class="input-normal control-text">
                </div>
                <label class="control-label">地图名称：</label>
                <div class="controls">
                    <input type="text" id="mapName" class="input-normal control-text">
                </div>
            </div>
        </div>


        <!--<div class="row">-->
        <!--<div class="control-group span12">-->
        <!--<div class="controls">-->
        <!--<label class="control-label">自定义：</label>-->
        <!--<label class="text"><input type="text" id="height" type="number"  min="0" max="9999"  data-rules="{number : true}">  *</label>-->
        <!--<input type="text" id="width" type="number"min="0" max="9999"  data-rules="{number : true}">-->

        <!--</div>-->
        <!--</div>-->
        <!--</div>-->


        <!--<div class="row">-->
        <!--<div class="control-group span15">-->
        <!--<label class="control-label">自定义：</label>-->
        <!--&lt;!&ndash;<div class="controls">&ndash;&gt;-->
        <!--&lt;!&ndash;<input type="text" id="height" class="input-normal control-text">*&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--&lt;!&ndash;<label class="control-label">宽度：</label>&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="controls">&ndash;&gt;-->
        <!--<input type="text" id="width" class="input-normal control-text">-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--</div>-->
        <!--</div>-->
    </form>
</div>

<div id="content1" class="hide">
    <form class="form-horizontal" name="mapForm" id="mapForm" th:action="@{/admin/map/editor/uploadPhoto}" method="post" enctype="multipart/form-data">
        <div class="row">
            <div class="control-group span2">
                <img id="viewImg" th:src="@{/resources/img/1寸.jpg}" alt="sdfsdfsdf"  style="width: 70px;height: 100px"/>
                <input id="viewFiles" name="viewFiles" type="file" />
                <input id="id" name="id" type="hidden"/>
            </div>
        </div>
    </form>
</div>


<script type="text/javascript">

var svgCanvas = Raphael.svgCanvas("canvas_container", {
    width: 1200,
    height: 800
});
//    $('#canvas_container').width(800);
svgCanvas.toolChanged(function(type){
    $('#penToolBar div.op_sel').removeClass('op_sel').addClass('op');
    $('#penToolBar div[name='+type+']').removeClass('op').addClass('op_sel');
});
svgCanvas.elementCreated(function(element) {
    if (svgCanvas.isText(element)) {
    }
});

/**
 * 拖拽处理, 关联区域和门
 */
svgCanvas.elementDroped(function(event, element){
    console.log("#####");
    if (event.dataTransfer) {// drop
        var type = event.dataTransfer.getData("type");// 拖拽的类型:area, door, map
        console.log(type);
        var id = event.dataTransfer.getData("id")
        if (type == 'map' || type == 'area') {
            if (id) {
                element.data(type, id);

                if(type == "map"){
                    element.data("name", "地图:"+id);
                } else if(type == "area"){
                    element.data("name", "区域:"+event.dataTransfer.getData("name"));
                    element.attr({title:event.dataTransfer.getData("name")});
                }
                $("#elementName").text(element.data("name")).show();
            }
        } else if (type == 'door') {
            console.log(element.attr('src'));
            if (element.type == 'image' && element.attr('src') == DOOR_CLOSE_URL) {
                element.data('door', id);
                console.log(id);
                element.data("name", "门:"+event.dataTransfer.getData("name"));
                element.attr({title:event.dataTransfer.getData("name")});
                $("#elementName").text(element.data("name")).show();
                event.stopPropagation();// 阻止冒泡
            }
        }
    }
});



svgCanvas.selectChanged(function(element) {
    if (element == null) {
        $('#elementToolBar').hide();
        $("#elementName").hide(); // 元素属性
    } else {
        $('#elementToolBar').show();

        // 元素属性
        var name = element.data("name");
        if (name) {
            $("#elementName").text(name).show();
        } else {
            $("#elementName").hide();
        }

        var fill = element.attr('fill');
        if (fill == 'none') {
            $('#fill_none').removeClass("op").addClass("op_sel");
            $('#fill_picker').parent().removeClass("op_sel").addClass("op");
            $('#fill_picker').val('#000001');
        } else {
            $('#fill_none').removeClass("op_sel").addClass("op");
            $('#fill_picker').parent().removeClass("op").addClass("op_sel");
            $('#fill_picker').val(fill);
        }

        var fillOpacity = element.attr('fill-opacity');
        if (fillOpacity) {
            $('#fill-opacity').val(fillOpacity);
        }

        var stroke = element.attr('stroke');
        if (stroke == 'none') {
            $('#stroke_none').removeClass("op").addClass("op_sel");
            $('#stroke_picker').parent().removeClass("op_sel").addClass("op");
            $('#stroke_picker').val('#000001');
        } else {
            $('#stroke_none').removeClass("op_sel").addClass("op");
            $('#stroke_picker').parent().removeClass("op").addClass("op_sel");
            $('#stroke_picker').val(stroke);
        }

        var strokeWidth = element.attr('stroke-width');
        $('#stroke-width div[class=op_sel]').attr("class", "op");
        $('#op_larg'+strokeWidth).attr("class", "op_sel");
    }

    if (element != null && element.type == 'text') {
        $('#font_tool').show();

        if (element.attr('font-weight') == 'bold') {
            $('#font-weight').removeClass('op').addClass('op_sel');
        } else {
            $('#font-weight').removeClass('op_sel').addClass('op');
        }
        if (element.attr('font-style') == 'italic') {
            $('#font-style').removeClass('op').addClass('op_sel');
        } else {
            $('#font-style').removeClass('op_sel').addClass('op');
        }

        $('#font-family').val(element.attr('font-family'));

        var fontSize = element.attr('font-size');
        fontSize = Number(fontSize.substring(0, fontSize.length - 2));
        if ($.isNumeric(fontSize)) {
            $('#font-size').val(fontSize);
        }
    } else {
        $('#font_tool').hide();
    }

    if (element != null && element.type == 'path') {
        $('#pathToolBar').show();
        var path = element.attr('path');
        if (path[path.length - 1][0] != 'Z') {
            $('#closePath').removeClass("op_sel").addClass("op");
        } else {
            $('#closePath').removeClass("op").addClass("op_sel");
        }
    } else {
        $('#pathToolBar').hide();
    }

    if (element != null && element.type == 'set') {
        $('#alignToolBar').show();
    } else {
        $('#alignToolBar').hide();
    }

});

var paper = svgCanvas.paper();

// 导入背景图片
function importBackgroundImage() {
}

/**
 * 创建新的地图文件
 */
function create() {
//    dialog.show();
    svgCanvas.reset();
    svgCanvas.setCanvasSize($("#map input[id=width]").val(), $("#map input[id=height]").val());
}

/**
 * 设置界面尺寸
 */
function size() {
    dialog.show();
//    svgCanvas.reset();
    svgCanvas.setCanvasSize($("#map input[id=width]").val(), $("#map input[id=height]").val());
}

/**
 * 保存当前地图文件
 */
function save() {
    var json = svgCanvas.toJson();
    // 将json数据上传到服务器
    console.log(json);
    var tree = control.getChild('mytree');
    var store = tree.get('store');
    var selectedNode = tree.getSelected();
    console.log(selectedNode+"-------------");
    var id;
    if (selectedNode) {
        id = selectedNode.id;
    }

    $.post(BASE_URL+"admin/map/saveMap",{ json: json,path: id},function(json){
    }, 'json');
}

function load(json) {
    svgCanvas.paper().fromJSON(json, function(el, data) {
        // Recreate the set using the identifier
        if ( !window[data.setName] ) window[data.setName] = paper.set();

        // Place each element back into the set
        window[data.setName].push(el);

        if ( data.ft && data.ft.attrs ) {
            paper.freeTransform(el);
            el.freeTransform.attrs = data.ft.attrs;
            el.freeTransform.apply();
        }

        return el;
    });
}

function closePath(el) {
    var selEl = svgCanvas.getSelected();
    if (selEl != null && selEl.type == 'path') {
        var path = selEl.attr('path');
        var cmd = {};
        var close = function() {
            path.push(['Z']);
            selEl.attr({path: path});
            svgCanvas.freeTransformUnplug();
            svgCanvas.initFreeTransform(selEl);
            svgCanvas.fireElementSelected(selEl);
            //$(el).removeClass("op").addClass("op_sel");
        };
        var open = function() {
            path.pop();
            selEl.attr({path: path});
            svgCanvas.freeTransformUnplug();
            svgCanvas.initFreeTransform(selEl);
            svgCanvas.fireElementSelected(selEl);
            //$(el).removeClass("op_sel").addClass("op");
        };
        if (path[path.length - 1][0] != 'Z') {
            cmd.redo = close;
            cmd.undo = open;
            close();
        } else {
            cmd.redo = open;
            cmd.undo = close;
            open();
        }
        svgCanvas.addHistory(cmd);
    }
}

function alignLeft() {
    svgCanvas.alignLeft(svgCanvas.getSelected());
}

function alignRight() {
    svgCanvas.alignRight(svgCanvas.getSelected());
}

function alignCenter() {
    svgCanvas.alignCenter(svgCanvas.getSelected());
}
function alignTop() {
    svgCanvas.alignTop(svgCanvas.getSelected());
}

function alignBottom() {
    svgCanvas.alignBottom(svgCanvas.getSelected());
}

function alignMiddle() {
    svgCanvas.alignMiddle(svgCanvas.getSelected());
}

/**
 * 设置边线颜色
 * @param color
 */
function fillChange(color) {
    $('#fill_picker').val(color);
    svgCanvas.attrChanged({'fill': color});
    if (color == 'none') {
        $('#fill_none').removeClass("op").addClass("op_sel");
        $('#fill_picker').parent().removeClass("op_sel").addClass("op");
        $('#fill_picker').val('#000001');
    } else {
        $('#fill_none').removeClass("op_sel").addClass("op");
        $('#fill_picker').parent().removeClass("op").addClass("op_sel");
    }
}

function strokeChange(color) {
    svgCanvas.attrChanged({'stroke': color});

    if (color == 'none') {
        $('#stroke_none').removeClass("op").addClass("op_sel");
        $('#stroke_picker').parent().removeClass("op_sel").addClass("op");
        $('#stroke_picker').val('#000001');
    } else {
        $('#stroke_none').removeClass("op_sel").addClass("op");
        $('#stroke_picker').parent().removeClass("op").addClass("op_sel");
    }
}

//function propertyChange(color) {
//    $("#property").setFormFields("123");
//    svgCanvas.attrChanged({'stroke': color});

//    if (color == 'none') {
//        $('#stroke_none').removeClass("op").addClass("op_sel");
//        $('#stroke_picker').parent().removeClass("op_sel").addClass("op");
//        $('#stroke_picker').val('#000001');
//    } else {
//        $('#stroke_none').removeClass("op_sel").addClass("op");
//        $('#stroke_picker').parent().removeClass("op").addClass("op_sel");
//    }
//    alert("设置属性");
//
//}

function strokeWidthChange(strokeWidth) {
    svgCanvas.attrChanged({'stroke-width': strokeWidth});
    $('#stroke_tool div[class=op_sel]').attr("class", "op");
    $('#op_larg'+strokeWidth).attr("class", "op_sel");
}

function textStyleChange(el, attrName) {
    var element = svgCanvas.getSelected();
    if (svgCanvas.isText(element)) {
        var attr = {};
        if ($(el).hasClass('op_sel')) {
            $(el).removeClass('op_sel').addClass('op');
            attr[attrName] = null;
        } else {
            $(el).removeClass('op').addClass('op_sel');
            attr[attrName] = $(el).css(attrName);
        }
        element.attr(attr);
    }
}

function toolChange(type) {
    svgCanvas.changeTool(type);
}

function removeSelected() {
    svgCanvas.removeSelected();
}

function fontSizeChange(fontSize) {
    svgCanvas.attrChanged({'font-size': fontSize+'px'});
}

function fontFamilyChange(fontFamily) {
    svgCanvas.attrChanged({'font-family': fontFamily});
}

</script>

<script th:inline="javascript" type="text/javascript">


var Overlay = BUI.Overlay
var dialog = new Overlay.Dialog({
    title:'地图尺寸设置',
    width:400,
    height:300,
//配置DOM容器的编号
    contentId:'content',
    dataType:  'json',
    success:function (mapName,height,width) {
        alert($("input[name='enable']:checked").val());
        var enable = $("input[name='enable']:checked").val()
        if(enable = 0){
            height = 800;
            width = 600;
        }
        if(enable = 1){
            height = 1280;
            width = 800;
        }
        if(enable = 2){
            height = 1440;
            width = 900;
        }
        if(enable = 3){
            height = 1680;
            width = 1050;
        }
        if(enable = 4){
            height = 1920;
            width = 1080;
        }else{
            mapName = $("#map input[id=mapName]").val();
            height = $("#map input[id=height]").val();
            width = $("#map input[id=width]").val();
        }

        var tree = control.getChild('mytree');
        var store = tree.get('store');
        var selectedNode = tree.getSelected();
        var id;
        if (selectedNode) {
            if (selectedNode.id.indexOf(".map") != -1) {
                id = selectedNode.id.substring(0, selectedNode.id.length - 4) + '/' + mapName;
            } else {
                id = selectedNode.id + '/' + mapName;
            }

        } else {
            id = mapName;
        }

//            alert(width);
        $.post(BASE_URL+"admin/map/map",{ path: id},function(json){
        }, 'json');


        store.add({id : id,text : mapName, leaf : true},  selectedNode);
        tree.expandNode(selectedNode);
        svgCanvas = Raphael.svgCanvas("canvas_container", {
            width: $("#map input[id=width]").val(),
            height: $("#map input[id=height]").val()
        });

        this.close();
    }
});

//全局变量
//    var hwTree = null; //硬件数据组件
var areaStore = null; //硬件树数据缓存
var equipmentStore = null; //硬件树数据缓存
var caMaxNumber = 32; //区域控制器最大数量
var currentTreeNodeId = "0"; //当前选中的树节点ID
var BASE_URL = /*[[@{/}]]*/ '/'; //根目录
var DOOR_CLOSE_URL = /*[[@{/resources/map/icons/door_close.png}]]*/ "../../../../resources/map/icons/door_close.png";
var control;

// 输入背景图片设置
(function() {
    var viewFiles = document.getElementById("importImage");
    viewFiles.addEventListener("change", function () {
        var reader = new FileReader();
        reader.onload = function( evt ){
            svgCanvas.setBackgroundImage(evt.target.result)
        }
        reader.readAsDataURL(this.files[0]);
    }, false);
})();

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev, type, name)
{
    ev.dataTransfer.setData('type', type);
    ev.dataTransfer.setData('id', ev.target.id);
    ev.dataTransfer.setData('name', name);
}

function drop(ev) {
    ev.preventDefault();
    //ev.target.appendChild(document.getElementById(data));
    console.log("drop");
    if (event.dataTransfer) {// drop
        var type = event.dataTransfer.getData("type");// 拖拽的类型:area, door, map
        console.log(type);
        if (type == 'door') {
            var id = event.dataTransfer.getData("id");
            if (id) {

                var x = svgCanvas.getZoomPosX(event.pageX);
                var y = svgCanvas.getZoomPosY(event.pageY);
                var imageEl = svgCanvas.createImage(DOOR_CLOSE_URL, x, y, 32, 32);
                imageEl.data(type, id);
                imageEl.data("name", "门:"+event.dataTransfer.getData("name"));
                $("#elementName").text(imageEl.data("name")).show();
            }
        }
    }
}

$(function () {
    BUI.use(['bui/layout','bui/grid','bui/data','bui/tree'],function (Layout,Grid,Data,Tree) {
//        var Store = Data.Store,
//                columns = [{
//                    title : '表头1',
//                    dataIndex :'a'
//                },{
//                    id: '123',
//                    title : '表头2',
//                    dataIndex :'b'
//                },{
//                    title : '表头3',
//                    dataIndex : 'c'
//                }],
//                data = [{a:'123'},{a:'cdd',b:'edd'},{a:'1333',c:'eee',d:2}],
        var equipment = /*[[${actree}]]*/ [];
        var areas = /*[[${agtree}]]*/ [];
        var nodes = /*[[${main}]]*/ [];
//        areas = [
//            {text : '区域组1',id : '2'},{pid:"2", text : '区域1',id : '21'},{pid:"2",text : '区域2',id : '22'},{pid:"2",text : '区域3',id : '23'},
//            {text : '区域组2',id : '3'},{pid:"3", text : '区域4',id : '31'},{pid:"3", text : '区域5',id : '32'},{pid:"3", text : '区域6',id : '33'}
//        ];
        console.log(areas);
        areaStore = new Data.TreeStore({
            pidField: 'pid', //设置pid的字段名称
            data: areas,
            url: "getAreaGroupTreeData",
            root: { id: '0', text: '1' }
        });

        equipmentStore = new Data.TreeStore({
            pidField: 'pid', //设置pid的字段名称
            data: equipment,
            url: "getTreeData",
            root: { id: '0', text: '1' }
        });

//        mainStore = new Data.TreeStore({
//            pidField: 'pid', //设置pid的字段名称
//            data: nodes,
//            root: { id: '0', text: '1' }
//        });

        control = new BUI.Component.Controller({
            width:250,
            height:$('#west').height() - 2,
            render : '#explorer',
            elCls : 'layout-test',
            defaultChildClass : 'controller',
            children : [
//                    {
//                    layout : {
//                        title : '导航'
//                    },
//                    xclass : 'tree-list',//生成tree
//                    id : 'mytree',
//                    pidField: 'pid',
//                    itemTpl: '<li id="{id}" pid="{pid}" draggable="true" ondragstart="drag(event,\'map\', \'{text}\')">{text}</li>', //列表项的模板
//                    nodes : nodes
//                },
                {
                    layout : {
                        title : '区域'
                    },
                    xclass : 'tree-list',//生成tree
                    id : 'areaTree',
                    pidField: 'pid',
                    itemTpl: '<li id="{id}" pid="{pid}" draggable="true" ondragstart="drag(event,\'area\', \'{text}\')">{text}</li>', //列表项的模板
                    nodes : areas,
                    store:areaStore

                },{
                    layout : {
                        title : '设备'

                    },
                    xclass : 'tree-list',//生成tree
                    id : 'doorTree',
                    itemTpl: '<li id="{id}" pid="{pid}" draggable="true" ondragstart="drag(event,\'door\', \'{text}\')">{text}</li>', //列表项的模板
                    nodes : equipment,
                    store:equipmentStore
//                    var equipment = /*[[${actree}]]*/ [];
//        hwStore = new Data.TreeStore({
//            pidField: 'pid', //设置pid的字段名称
//            data: equipment,
//            url: "getTreeData",
//            root: { id: '0', text: '1' }
//        });
                }],
            plugins : [Layout.Accordion]
        });
        control.render();

        var tree = control.getChild('mytree');
        tree.on('itemclick',function(ev){
            var path = ev.item.text;
            $.post(BASE_URL+"admin/map/getMap",{ path: path}, function(json){
                /**
                 *显示地图
                 */
                svgCanvas.fromJson(json);
            }, 'json');
        });
    });
});

</script>
</body>
</html>
